<script setup lang="ts">
import { ref, computed, watch, type Ref, onMounted, onUnmounted } from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import {
  delay,
  useDark,
  useECharts,
  type EchartOptions
} from "@pureadmin/utils";
import { Options } from "@antv/x6/lib/graph/options";




interface ListItem {
  name: string
  value: number
}
const props = defineProps<{
  list: ListItem[]
}>()



const { isDark } = useDark();

const theme: EchartOptions["theme"] = computed(() => {
  return isDark.value ? "dark" : "light";
});

const pieChartRef = ref<HTMLDivElement | null>(null);
const { setOptions, resize } = useECharts(pieChartRef as Ref<HTMLDivElement>, {
  theme
});

function initOption() {

  setOptions(
    {
      tooltip: {
        trigger: "item"
      },
      legend: {
        orient: "vertical",
        // @ts-expect-error
        right: '80px',
        top: '30%',
        // formatter: function (name: string) {
        //   // 获取legend显示内容
        //   let data = Options.value.series[0].data;
        //   let total = 0;
        //   let tarValue = 0;
        //   for (let i = 0, l = data.length; i < l; i++) {
        //     total += data[i].value;
        //     if (data[i].name == name) {
        //       tarValue = data[i].value;
        //     }
        //   }
        //   let p = ((tarValue / total) * 100).toFixed(0);
        //   return name + ' ' + ' ' + p + '%';
        // },
        // left: 'center'
      },
      series: [
        {
          name: "Github信息",
          type: "pie",
          left: '-180px',
          radius: ['40%', '70%'],
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 1
          },
          // label: {
          //   show: false,
          //   position: 'center'
          // },
          // data: [
          //   { value: 20000, name: "watchers" },
          //   { value: 66666, name: "star" },
          //   { value: 10000, name: "forks" },
          //   { value: 1000, name: "open_issues" }
          // ],
          data: props.list,
          labelLine: {
            show: false
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            },
            // label: {
            //   show: true,
            //   fontSize: 40,
            //   fontWeight: 'bold'
            // }
          }
        }
      ]
    },
    {
      name: "click",
      callback: params => {
        console.log("click", params);
      }
    },
    // 点击空白处
    {
      type: "zrender",
      name: "click",
      callback: params => {
        console.log("点击空白处", params);
      }
    }
  );
}



onMounted(() => {
  initOption();
  window.addEventListener("resize", resize);
});

onUnmounted(() => {
  window.removeEventListener("resize", resize);
});

watch(
  () => useAppStoreHook().getSidebarStatus,
  () => {
    delay(600).then(() => resize());
  }
);

</script>

<template>
  <div ref="pieChartRef" style="width: 100%; height: 360px" />
</template>
